<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
 
    <h:head>
    </h:head>

    <h:body style="text-align:center">

        <h:form>

            <p:growl id="growl" sticky="true" showDetail="true"/>
            <p:wizard flowListener="#{userWizard.onFlowProcess}">
                <p:tab id="personal" title="Planes">
                    <p:growl id="msgs" showDetail="true"  />  
                    <p:panel header="Personal Details">
                        <h:messages errorClass="error"/>
                        <!--
                        <p:separator />  
                        -->
                        <p:commandButton value="Submit" update="msgs" actionListener="#{userWizard.displayLocation}" id="btnSubmit"/>  
                        <h:panelGrid columns="2" cellpadding="5">  
                            <p:selectOneMenu id="city" value="#{userWizard.city}">  
                                <f:selectItem itemLabel="Seleccione..." itemValue="0" />  
                                <f:selectItems value="#{userWizard.cities}" />  
                                <p:ajax update="suburbs"  
                                        listener="#{userWizard.handleCityChange}" />  
                            </p:selectOneMenu>  
                            <p:selectOneMenu id="suburbs" value="#{userWizard.suburb}">  
                                <f:selectItem itemLabel="Select Suburb" itemValue="" />  
                                <f:selectItems value="#{userWizard.suburbs}" />  
                            </p:selectOneMenu>  
                        </h:panelGrid>  
                        <h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
                            <h:outputText value="Firstname: *" />
                            <p:inputText required="true" label="Firstname"
                                         value="#{userWizard.user.firstname}" />

                            <h:outputText value="Lastname: *" />
                            <p:inputText required="true" label="Lastname"
                                         value="#{userWizard.user.lastname}" />

                            <h:outputText value="Age: " />
                            <p:inputText value="#{userWizard.user.age}" />

                            <h:outputText value="Skip to last: " />
                            <h:selectBooleanCheckbox value="#{userWizard.skip}" />
                        </h:panelGrid>
                    </p:panel>
                </p:tab>

                <p:tab id="address" title="Address">
                    <p:panel header="Adress Details">

                        <h:messages errorClass="error"/>

                        <h:panelGrid columns="2" columnClasses="label, value">
                            <h:outputText value="Street: " />
                            <p:inputText value="#{userWizard.user.street}" />

                            <h:outputText value="Postal Code: " />
                            <p:inputText value="#{userWizard.user.postalCode}" />

                            <h:outputText value="City: " />
                            <p:inputText value="#{userWizard.user.city}" />

                            <h:outputText value="Skip to last: " />
                            <h:selectBooleanCheckbox value="#{userWizard.skip}" />
                        </h:panelGrid>
                    </p:panel>
                </p:tab>

                <p:tab id="contact" title="Contact">
                    <p:panel header="Contact Information">

                        <h:messages errorClass="error"/>

                        <h:panelGrid columns="2" columnClasses="label, value">
                            <h:outputText value="Email: *" />
                            <p:inputText required="true" label="Email"
                                         value="#{userWizard.user.email}" />

                            <h:outputText value="Phone: " />
                            <p:inputText value="#{userWizard.user.phone}"/>

                            <h:outputText value="Additional Info: " />
                            <p:inputText value="#{userWizard.user.info}"/>
                        </h:panelGrid>
                    </p:panel>
                </p:tab>

                <p:tab id="confirm" title="Confirmation">
                    <p:panel header="Confirmation">

                        <h:panelGrid id="confirmation" columns="6">
                            <h:outputText value="Firstname: " />
                            <h:outputText styleClass="outputLabel"
                                          value="#{userWizard.user.firstname}" />

                            <h:outputText value="Lastname: " />
                            <h:outputText  styleClass="outputLabel"
                                           value="#{userWizard.user.lastname}"/>

                            <h:outputText value="Age: " />
                            <h:outputText styleClass="outputLabel"
                                          value="#{userWizard.user.age}" />>

                            <h:outputText value="Street: " />
                            <h:outputText styleClass="outputLabel"
                                          value="#{userWizard.user.street}" />

                            <h:outputText value="Postal Code: " />
                            <h:outputText styleClass="outputLabel"
                                          value="#{userWizard.user.postalCode}" />

                            <h:outputText value="City: " />
                            <h:outputText styleClass="outputLabel"
                                          value="#{userWizard.user.city}" />

                            <h:outputText value="Email: " />
                            <h:outputText styleClass="outputLabel"
                                          value="#{userWizard.user.email}" />

                            <h:outputText value="Phone " />
                            <h:outputText styleClass="outputLabel"
                                          value="#{userWizard.user.phone}"/>

                            <h:outputText value="Info: " />
                            <h:outputText styleClass="outputLabel"
                                          value="#{userWizard.user.info}" />

                            <h:outputText />
                            <h:outputText />
                        </h:panelGrid>

                        <p:commandButton value="Submit" update="growl" 
                                         actionListener="#{userWizard.save}"/>

                    </p:panel>
                </p:tab>

            </p:wizard>
            
            
            

        </h:form>

    </h:body>


</html>